import React from 'react';
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
// import http, { mockLogin } from '../../utils/http';
import { mockLogin } from '../../utils/http';

interface LoginProps {
  onLoginSuccess: (username: string, password: string) => void;
}

const Login: React.FC<LoginProps> = ({ onLoginSuccess }) => {
  const navigate = useNavigate();

  const onFinish = async (values: any) => {
    try {
      const { username, password } = values;
      onLoginSuccess(username, password);
      console.log('数据正确');
      console.log('打印用户名类型', typeof username);
      const response: any = await mockLogin(username, password);

      console.log('打印response', response);
      if (response.success) {
        message.success('登录成功');
        navigate('/dashboard');
      } else {
        // message.error(JSON.parse(response).error);
        message.error("用户名或密码错误，请重试");
      }
    } catch (error) {
      console.error('登录失败:', error);
      message.error('登录失败，请重试');
    }
  };

  return (
    <div className="login-container">
      <div className="login-form">
        <h2 className="login-title">旅游日记平台管理系统</h2>
        <Form
          name="normal_login"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input prefix={<UserOutlined />} placeholder="用户名" size="large" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="密码"
              size="large"
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button" size="large">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;